<script lang="ts" setup>
import Menu from "@/components/user/Menu.vue";
import {useRoute, useRouter} from "vue-router";
import {onMounted, reactive, ref, toRefs} from "vue";
import {getUserinfo, listComments, updateUserInfo, updateUserPwd} from "@/api/user";
import man from "@/assets/images/man.png";
import {ElMessage, type FormInstance} from "element-plus";
import {useAuthStore} from "@/stores/auth";
import no_comment from "@/assets/images/no_comment.png";

const route = useRoute();
const router = useRouter();

const state = reactive({
  background: true,
  total: 0,
  pageSize: 10,
  comments: [],
  baseUrl: import.meta.env.VITE_APP_BASE_API_URL,
  imgBaseUrl: import.meta.env.VITE_APP_BASE_IMG_URL
});
const {total, pageSize, comments, baseUrl, imgBaseUrl, background} = toRefs(state)
const handleCurrentChange = (pageNum: any) => {

  loadComments(pageNum);
};

onMounted(async () => {
  loadComments(1);
});

const loadComments = async (pageNum: any) => {
  const {data} = await listComments({'pageNum': pageNum, 'pageSize': state.pageSize});
  state.comments = data.list;
  state.total = Number(data.total);
};


</script>
<template>
  <div class="main">
    <div class="container">
      <div class="left">
        <Menu></Menu>
      </div>
      <div class="right">
        <div class="user-comment">
          <div v-if="total == 0" class="no-comment">
            <img :src="no_comment" alt="">
            <span>暂无评论</span>
          </div>
          <div v-else class="comment-list">
            <div class="title">我的书评</div>
            <div class="list">
              <div v-for="(item,index) in comments" :key="index" class="item">
                <div class="avatar">
                  <img :src="item.commentBookPic?imgBaseUrl + item.commentBookPic:man" alt="头像"/>
                </div>
                <div class="content">
                  <div class="name">{{ item.commentBook }}</div>
                  <div class="comment" v-html="item.commentContent"></div>
                  <div class="time">{{ item.commentTime }}</div>
                </div>
              </div>
            </div>
            <div class="page-nav">
              <el-pagination v-if="total > 0"
                             :background="background"
                             :page-size="pageSize"
                             :total="total"
                             class="mt-4"
                             layout="prev, pager, next"
                             small
                             @current-change="handleCurrentChange"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.main {
  background-color: #F5F5F5;
  display: flex;
  justify-content: center;
  user-select: none;

  .container {
    width: 60%;
    background-color: #fff;
    display: flex;

    .left {
      width: 20%;
      box-sizing: border-box;
      flex: 1;
      border-right: 1px solid #F5F5F5;
      padding: 10px 0;
    }

    .right {
      flex: 3;
      padding: 10px;
      display: flex;
      gap: 30px;
      box-sizing: border-box;

      .user-comment {
        min-height: 80vh;
        width: 100%;
        display: flex;
        justify-content: center;

        .no-comment {
          height: 100%;
          //border: 1px solid #000;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;

          span {
            color: #DDD8CF;
          }
        }

        .comment-list {
          width: 100%;
          display: flex;
          flex-direction: column;
          //border: 1px solid #000;
          .title {
            font-size: 20px;
            padding-bottom: 10px;
            border-bottom: 1px solid #E4E7ED;
          }

          .list {
            display: flex;
            flex-direction: column;

            .item {
              //border: 1px solid #000;
              border-bottom: 1px solid #E4E7ED;
              display: flex;
              padding: 10px;
              gap: 10px;

              .avatar {
                //border: 1px solid #000;
                img {
                  width: 50px;
                  height: 50px;
                  border-radius: 50%;
                  object-fit: cover;
                }
              }

              .content {
                padding-bottom: 10px;
                display: flex;
                flex-direction: column;
                gap: 10px;

                .name {
                  font-size: 18px;
                  color: #333;
                }

                .comment {
                  font-size: 14px;
                  color: #666;
                  line-height: 20px;
                }

                .time {
                  font-size: 12px;
                  color: #999;
                }
              }
            }

            .item:last-child {
              border-bottom: none;
            }
          }

          .page-nav {
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 10px;
          }

        }
      }
    }
  }

}
</style>